@use "@/styles/usenamespace.scss" as ns;
@use "@/styles/mixin.scss" as mixin;
@use "@/styles/function.scss" as fun;

@include ns.b(select) using ($b) {
  #{fun.getCssVarName($b, zIndex)}: 1000;
  #{fun.getCssVarName($b, backgroundColor)}: #{fun.getCssVarValue(primary-strokeColor)};
  #{fun.getCssVarName($b, placeholderColor)}: #999;
  $transition: .15s linear;
  border-radius: 16rpx;
  position: relative;

  @include ns.e(mask) using ($e) {
    position: fixed;
    @include mixin.locate();
  }

  @include ns.b($b) using ($b) {
    @include ns.e(content) using ($e) {
      height: 0px;
      position: absolute;
      top: calc(100% + 32rpx);
      background: fun.getCssVarValue($b, backgroundColor);
      border-radius: inherit;
      transition: height $transition;
    }
  }

  @include ns.e(wrapper) using ($e) {
    display: flex;
    align-items: center;
    background: fun.getCssVarValue($b, backgroundColor);
    border-radius: inherit;
    padding: 24rpx 32rpx;
  }

  @include ns.e(selection) using ($e) {
    flex: auto;

    &-item {
      width: fit-content;
    }

    &-input {
      min-width: 24rpx;
      position: relative;
    }
  }

  @include ns.e(suffix) using ($e) {
    margin-left: 16rpx;

    &>.icon-arrow-down {
      transition: transform $transition;
    }
  }

  @include ns.e(placeholder) using ($e) {
    color: fun.getCssVarValue($b, placeholderColor);
  }

  @include ns.b(option) using ($ob) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 32rpx;
    color: fun.getCssVarValue(primary-shadowColor);

    .icon-select {
      visibility: hidden;
    }

    @include ns.s(active) using ($s) {
      color: fun.getCssVarValue(primary-textColor);

      .icon-select {
        visibility: visible;
      }
    }

    @include ns.s(disabled) using ($s) {
      color: fun.getCssVarValue(disabled-textColor);
    }
  }

  @include ns.s(show) using ($s) {
    @include ns.b($b) using ($b) {
      $className: content suffix mask selection-item selection-input;

      @each $item in $className {
        @include ns.e($item) using ($e) {
          z-index: fun.getCssVarValue($b, zIndex);
        }
      }

      @include ns.e(content) using ($e) {
        height: 400rpx;
      }

      @include ns.e(suffix) using ($e) {
        &>.icon-arrow-down {
          transform: rotate(180deg);
        }
      }
    }
  } 

  @include ns.nots(show) {
    @keyframes stratum {
      0% {
        z-index: fun.getCssVarValue($b, zIndex);
      }
      100% {
        z-index: 0;
      }
    }
    @include ns.b($b) using ($b) {
      @include ns.e(content) using ($e) {
        animation: stratum $transition;
      }
    }
  }

  @include ns.s(fit-width) using ($s) {
    width: fit-content;
  }

  @include ns.s(multiple) using ($s) {
    $margin: 8rpx;

    @include ns.b($b) using ($b) {
      @include ns.e(selection) using ($e) {
        display: flex;
        flex-wrap: wrap;
        margin: calc($margin * -1);

        &-item {
          display: flex;
          align-items: baseline;
          background: fun.getCssVarValue(info-backgroundColor);
          padding: 0 16rpx;
          border-radius: 8rpx;
          font-size: 85%;
          margin: $margin;

          &>.iconfont {
            margin-left: 8rpx;
          }
        }

        &-input {
          margin: $margin;
        }
      }
    }
  }

  @include ns.s(disabled) using ($s) {
    #{fun.getCssVarName($b, backgroundColor)}: #{fun.getCssVarValue(disabled-backgroundColor)};
    color: fun.getCssVarValue(disabled-textColor);
    pointer-events: none;
  }
}